<template>
  <div>
    <el-dialog
      :title="operateType === 'add' ? '新增用户' : '更新用户'"
      :visible="isShow"
    >
      <commons-from
        :form="operateForm"
        :form-label="operateFormLabel"
        ref="form"
      ></commons-from>
      <div slot="footer" class="dialogForm">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">确认</el-button>
      </div>
    </el-dialog>
    <div class="UserTop">
      <el-button type="primary" @click="addUser()" style="height: 40px"
        >+ 用户</el-button
      >
      <commons-from
        :form-label="formLabel"
        :form="searchFrom"
        ref="form"
      >
        <el-button type="primary" @click='getList(searchFrom.keyword)'>搜索</el-button>
      </commons-from>
    </div>
    <commons-tabel
      :TableData="tableData"
      :TableLabel="tableLabel"
      :pageConfig="pageconfig"
      @change="getList()"
      @del="delUser"  
      @edit="editUser"
    ></commons-tabel>
  </div>
</template>
<script>
import CommonsFrom from "../components/CommonsFrom.vue";
import CommonsTabel from "../components/CommonsTabel.vue";
import { getUserList } from "../../api/data.js"
export default {
  components: {
    CommonsFrom,
    CommonsTabel,
  },
  data() {
    return {
      operateType: "",
      isShow: false,
      operateFormLabel: [
        {
          model: "name",
          label: "姓名",
          type: "input",
        },
        {
          model: "age",
          label: "年龄",
          type: "input",
        },
        {
          model: "sex",
          label: "性别",
          type: "select",
          opts: [
            {
              label: "男",
              value: 1,
            },
            {
              label: "女",
              value: 0,
            },
          ],
        },
        {
          model: "birth",
          label: "出生日期",
          type: "date",
        },
        {
          model: "addr",
          label: "地址",
          type: "input",
        },
      ],
      operateForm: {
      },
      formLabel: [
        {
          model: "keyword",
          label: "",
          type: "input",
        },
      ],
      searchFrom: {
        keyword: "",
      },
      tableData: [
      ],
      tableLabel: [
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "age",
          label: "年龄",
        },
        {
          prop: "sexLabel",
          label: "性别",
        },
        {
          prop: "birth",
          label: "出生日期",
          width: 200,
        },
        {
          prop: "addr",
          label: "地址",
          width: 320,
        },
      ],
      pageconfig: {
        page: 1,//子组件更新page，这里的page也会更新（$emit）
        total: 30,
      },

    };
  },
  methods: {
    addUser() {
      (this.isShow = true), 
      this.operateForm = {
        name: "",
        addr: "",
        age: "",
        birth: "",
        sex: "",
      },
      (this.operateType = "add");
    },
    submitForm() {
      //将表单的数据传递给后台，后台再返回到前端
      if (this.operateType === "edit") {
        this.$axios.post("/user/edit", this.operateForm).then((response) => {
          this.isShow = false;
          this.getList()
        });
      } else {
        this.$axios.post("/user/add", this.operateForm).then((response) => {
          this.isShow = false;
          this.getList()
        });
      }
    },

    getList(name=''){
      this.pageconfig.loading = true
      name ? (this.pageconfig.page = 1):''
      getUserList({page:this.pageconfig.page,//这里的page是子组件通过$emit传递过来的
        name}).then(res =>{
        const tabelDatas= res.data.list.map(item=>{
          item.sexLabel = item.sex === 0?"女":"男"
          return item
        } )
        this.tableData = tabelDatas
        this.pageconfig.total = res.data.count
        this.pageconfig.loading = false
      })
    },
    delUser(row){//这里的row是子组件通过$emit传过来的，
      this.$confirm("此操作将永久删除该数据，是否确定？","提示",{
        confirmButtonText:"确定",
        cancelButtonText:"取消",
        type:"warning",
      }).then(()=>{
          const id = row.id
          this.$axios.get("/user/del",{params:{id:id}}).then(res=>{
            this.$message({
              message:"删除成功",
              type:'success'
            })
            this.getList()
          })
      })
    },
    editUser(row){
      this.operateType = "edit",
      this.isShow = true,
      this.operateForm = row //将原先的数据回显在表单上
    },
  },

  created(){
    this.getList()//在显示页面之前就加载数据
  }
};
</script>

<style lang="less" scoped>
.UserTop {
  display: flex;
  justify-content: space-between;
}
.dialogForm {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>